<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>视频播放器</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="video/video.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        $().ready(function(){
            $(".tab-menu li").click(function(){
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
                var _index = $(this).index();
            //让内容框的第 _index 个显示出来，其他的被隐藏
                $(".tab-box>div").eq(_index).show().siblings().hide();
            //改变选中时候的选项框的样式，移除其他几个选项的样式
            $(this).addClass("change").siblings().removeClass("change");
            });
        });
    </script>
    <section class="public_width">
    <dl class="video_con">
        <dt class="video_con_title">HAR移动软件演示<a href="https://github.com/tyb311/HAR/releases/download/v1.0/har1.0-release.apk">点击下载APP</a></dt>
            <figure class="video_con_show tab">
                <div class="video_bofang tab-box">     
                    <div class="video_con_show_con">
                        <video width="900" height="630" controls>
                            <source src="video/har_video2.mp4" type="video/mp4">
                        </video>
                    </div>                       
                    <div class="video_con_show_con">
                        <video width="900" height="630" controls>
                            <source src="video/uestc_lake.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                
                <figcaption class="video_show_zs">
                    <div class="video_show_zj">
                        <!-- <img class="video_show_zj_img" src="video/images/name.jpg"> -->
                        <p class="video_show_zj_js">
                            <b class="video_show_zj_name">播放列表</b>
                            <!-- <span class="video_show_zj_zc">描述</span> -->
                        </p>
                    </div>
                    <!-- <span class="video_show_title">播放列表</span> -->
                    <ul class="video_show_con tab-menu">
                        <li class="video_show_list"><span>HAR视频演示</span></li>
                        <li class="video_show_list"><span>电子科大上岸</span></li>
                        <!-- <li class="video_show_list"><img src="video/har.apk"><span>下载APP</span></li> -->
                    </ul>
                </figcaption>
            </figure>
        </dl>
    </section>
</body>
</html>
